<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>VUE第一天基础</title>
</head>
<body>
  <div class="app">
    <input type="text" v-model="age">
    <!-- 文本插值：{{}} mustache -->
    <p>{{`我今年` + age + `岁`}}</p>
    <mark>{{name}}</mark>
    <div>属性：{{arr1.length}}</div>
    <div>计算：{{1+1}}</div>
    <div>三元表达式：{{isLogin ? '头像' : '请登录'}}</div>
    <div>调用函数：{{fn1()}}</div>
    <hr>
    <h2>========= 以下是指令 =========</h2>
    <hr>
    <div v-text="name"></div>
    <div v-html="content"></div>
    <div v-if="isLogin">
      <h1>欢迎您，尊敬的{{name}}</h1>
    </div>
    <div v-else><h1>请登录</h1></div>
    <div v-if="sex === 1">先生</div>
    <div v-else-if="sex === 2">女士</div>
    <div v-else>你好</div>
    <div v-show="isLogin">123</div>
    <div v-if="isLogin">123</div>
  </div>
  <script src="../vue.js"></script>
  <script>
    // 1.实例化,创建vue实例
    let vm = new Vue({
      // 以下是配置选项
      // el:元素，接受的值是一个str，css选择器
      el: '.app',
      // 初识化数据
      data: {
        age: 18,
        name: 'Jack',
        arr1: [1,2,3,4],
        isLogin: false,
        content: '<mark>我是一段html字符串</mark>',
        sex: 'none'
      },
      methods: {
        fn1() {
          return 666
        }
      },
    });
  </script>
</body>
</html>